<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="4"
          ><div class="grid-content bg-purple">logo</div></el-col
        >
        <el-col :span="16"
          ><div class="grid-content bg-purple-light" @click="getUser">
            这是一个标题
          </div></el-col
        >
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            {{ userinfo.username }}
          </div></el-col
        >
      </el-row>
    </el-header>
    <!-- 侧边导航栏组件 -->
    <el-container class="mians">
      <el-aside width="200px">
        <el-menu
          class="el-menu-vertical-demo"
          unique-opened
          router
        >
          <el-submenu
            :index="item.path"
            v-for="(item, key) in menusData"
            :key="key"
          >
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>{{ item.authName }}</span>
            </template>
             <el-menu-item-group>
            <el-menu-item
              :index="val.path"
              v-for="(val, keys) in item.children"
              :key="keys"
              >{{ val.authName }}</el-menu-item
            >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
        <!--侧边栏结束 -->
      </el-aside>
      <el-main><router-view></router-view></el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      userinfo: {},
      menusData: [],
    };
  },
  methods: {
    getUser() {
      //这是一个测试
      this.$req("/users?pagenum=1&pagesize=1") //{headers: {'Authorization': this.userinfo.token}}
        .then((serverBackData) => {
          console.log(serverBackData);
        });
    },
  },
  mounted() {
    this.$store.commit("userChange");
    this.userinfo = this.$store.state.userinfo;
    // console.log(typeof this.userinfo.token);
    this.$req("/menus") //获取左侧列表数据
      .then((res) => {
        let {
          data: { data, meta },
        } = res;
        if (meta.status === 200) {
          this.menusData = data;
          // console.log(this.menusData,meta.status);
        } else if (meta.status !== 200) {
          this.$message({
            showClose: true,
            message: "获取左侧列表数据错误" + meta.msg,
            type: "error",
          });
        }
      });
  },
};
</script>

<style>
.mians {
  height: 680px;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>